var chromName = [{name:'chrI', side:'left'},
        {name:'chrII', side:'right'},
        {name:'chrIII', side:'left'},
        {name:'chrIV', side:'right'},
        {name:'chrV', side:'left'},
        {name:'chrVI', side:'right'},
        {name:'chrVII', side:'left'},
        {name:'chrVIII', side:'right'},
        {name:'chrIX', side:'left'},
        {name:'chrX', side:'right'},
        {name:'chrI', side:'left'}];
var rightChromName = ['chrX', 'chrXI', 'chrXII', 'chrXIII', 'chrXIV', 'chrXV', 'chrXVI', 'chrXVII', 'chrXVIII', '19', '20'];




function loadMockupProtovis2(radtagHash, callback) {

        /*var vis1 = new pv.Panel()
                .width(350)
                .height(140)
                .canvas("wo-form");

                vis1.add(pv.Bar)
                .data([1,1.2,1.7,1.5,.7,.2])
                .bottom(0).width(20)
                .height(function(d) d * 80)
                .left(function() this.index * 25);

    vis1.add(pv.Bar)
            .data([1,1.2,1.7,1.5,.7,.2])
            .bottom(0).width(20)
            .height(function(d) d * 80)
            .right(function() this.index * 25);


        vis1.render();

    */
var data = pv.range(5).map(function() pv.range(8).map(function() {return parseInt(Math.random()*3500);})),
    w = 900,
    h = 450,
    x = pv.Scale.linear(0, 15001).range(0, w/2 - 30),
    y = pv.Scale.ordinal(pv.range(8)).splitBanded(0, h, 4/5);

var vis = new pv.Panel()
    .width(w)
    .height(h)
    .bottom(20)
    .left(40)
    .right(40)
    .top(15)
    .def("i", -1)
    .canvas("pv-canvas");

var bar = vis.add(pv.Panel)
    .data(data)
  .add(pv.Bar)
    .data(function(a) a)
    .top(function() y(this.index))
    .height(y.range().band)
    .left(pv.Layout.stack())
    .width(x)
    .event("mouseover", function() vis.i(this.index))
    .event("mouseout", function() vis.i(-1))        
    .fillStyle(pv.colors("red", "blue", "green"));

bar.anchor("right").add(pv.Label)
    //.visible(function(d) d > 1000)
    .visible(function() vis.i() >= 0)
    .textStyle("white")
    //.text(function(d) d.toFixed(1));
    .text(function(d) parseInt(d));

bar.anchor("left").add(pv.Label)
    .visible(function() !this.parent.index)
    .textMargin(5)
    .textAlign("right")
    .text(function() {
        return chromName[this.index].name;
    });

vis.add(pv.Rule)
    .data(x.ticks())
    .left(function(d) Math.round(x(d)) - .5)
    .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
  .add(pv.Rule)
    .bottom(0)
    .height(5)
    .strokeStyle("#000")
  .anchor("bottom").add(pv.Label)
    .text(x.tickFormat)
    .anchor("bottom").add(pv.Label)
  .add(pv.Rule)
    .top(-15)
    .height(5)
    .strokeStyle("#000")
  .anchor("bottom").add(pv.Label);

var barRight = vis.add(pv.Panel)
    .data(data)
  .add(pv.Bar)
    .data(function(a) a)
    .top(function() y(this.index))
    .height(y.range().band)
    .right(pv.Layout.stack())
    .width(x);

barRight.anchor("right").add(pv.Label)
    .visible(function(d) d > .2)
    .textStyle("white")
    .text(function(d) parseInt(d));
    //.text(function(d) d.toFixed(1));

barRight.anchor("right").add(pv.Label)
    //.visible(function() { return ((this.parent.index < 8) ? true:false);})
    .visible(function() !this.parent.index)        
    .textMargin(5)
    .textAlign("left")
    .text(function() {
        return rightChromName[this.index];
    });

vis.add(pv.Rule)
    .data(x.ticks())
    .right(function(d) Math.round(x(d)) - .5)
    .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
  .add(pv.Rule)
    .bottom(0)
    .height(5)
    .strokeStyle("#000")
  .anchor("bottom").add(pv.Label)
  .add(pv.Rule)
    .top(-15)
    .height(5)
    .strokeStyle("#000")
  .anchor("bottom").add(pv.Label);
  //; //function(d) d.toFixed(1));

    vis.render();
   
    var radtagForm = new Ext.form.FormPanel({
            id: 'radtagForm',
            method: 'POST',
            autoHeight: true,
            autoScroll: true,
            border: true,
            closable:true,
            title: 'Multiplex Karyomap Mockup',
            buttonAlign: 'left',
            items: [
                new Ext.form.FieldSet({
                    autoHeight: true,
                    border: false,
                    items: [
                            {
                            xtype: 'box',
                            autoEl: {cn: 'RAD1 RAD2:YCR2:YO486 YO502:YPG500 YPG502 YPG503 YPG1000 YPG1001<br>YO486(Red) YO502(Green) Unknown(Blue)<br>Default: KB Scale'}
                            }
                    ]
                })
            ],
            listeners: {close:
                        function() {
                            Ext.getDom("pv-canvas").innerHTML = "";                            
                        }
                }

        });
    /*Ext.getDom("yseq-search-results").innerHTML = "";
    Ext.getDom("entry-panel").innerHTML = "";
    Ext.getDom("cgs-panel").innerHTML = "";    
    Ext.getDom("yad-panel").innerHTML = "";
    Ext.getDom("yo-panel").innerHTML = "";
    Ext.getDom("panel-samples").innerHTML = "";
    */
    callback(radtagForm);
        
    }
